<template>
    <div>
        <div id="bookresult">
            <div class="item" v-for="author in authors" :key="author.id">
                <span id="img-div">
                    <img :src="require(`../images/images/${author.id}.jpg`)" @click="$emit('change', author)">
                </span>
                <div class="bookmess">
                    <span id="authorname" @click="$emit('change', author)">{{ author.author }}</span>
                    <span>国籍：{{ author.nationnality }}</span>
                    <span>生卒：{{ author.date }}</span>
                    <span>代表作：{{ author.bookname }}</span>
                </div>
                <div class="money">
                    <button @click="viewDetails(author)">查看详情</button>
                </div>
            </div>
            <h3>{{ mess }}</h3>
        </div>
        <!--底部  -->
        <div id="footer">
            <p>不行做了</p>
        </div>
    </div>
</template>

<script>
export default {
    name: 'authoritems',
    props: {
        authors: Array,
        mess: String
    },
    methods: {
        viewDetails(author) {
            this.$emit('change', author);
        }
    }
}
</script>

<style src="../style/bookresult.css" scoped></style>
